In 2019 I decide to change my profession drastically from Developer to UI/UX Designer. One of the major factors that made me confident to change my profession even though I had a lack of experience in the UI/UX world was my experience in UI/UX Design Bootcamp. The bootcamp was held by Topcoder in my city in February 2019. After I graduated from the design bootcamp, it became clear to me that I really loved the UI/UX world and Topcoder was a platform able to accommodate my passion for this particular area. I will share my awesome experience of what I learned and gained from the UI/UX Design Bootcamp held by Topcoder.
The UI/UX Design Bootcamp was initiated by the Topcoder Community Team, led by Jessie D’Amato Ford, more famously known as TCO Queen jmpld40 (Topcoder Global Community Team Lead), and Fajar Maulana Harahap/fajar.mln (Topcoder Design Evangelist). This program was created with one specific goal, to have Topcoder’s top-rated designers help newbies learn about UI/UX skills so they can compete in Topcoder design challenges and start earning cash prizes.
The bootcamp program consists of two stages, onsite and online bootcamp. The onsite lasted five days and covered topics around technical UI skills. The online lasted for three weeks and covered topics about UX approach while doing live UX practice using real-world problems through Topcoder challenges.
The instructors were selected from Topcoder senior members that have experience in TCO Finals and have won many design challenges. In the bootcamp I participated in the instructors were riopurba (Rio Purba), eriantoongko (Erianto Ongko) and iaminfinite (Muhammad Arifin Siregar).
Without understanding the design tools, it will be very difficult for newbie designers to make UI/UX designs,let alone take part in the Topcoder challenges. Before the start of bootcamp our instructors sent some links to all students so we could watch basic tutorials about how to use the design tools and features of them.
There are several design tools/software that can be used in Topcoder design challenges; they are:
In the onsite bootcamp, the instructors taught us how to create a good user interface. They guided us on some basic principles to make a good UI design. Those include:
Basic Elements
Layout and Composition
How to Choose a Color
Typography
Images
To produce a good product design it is necessary to understand the needs and expectations of the product users. To be able to know this, we need a comprehensive research process. Fortunately at Topcoder, the initial research process is done by the challenge architect and copilot before the challenge starts. We, as designers, later will iterate the research process via the challenge forum and turn the results into design solutions. In online bootcamp the instructors showed us their way of doing this process from start to finish.
For example, one of the instructors, Rio Purba, told us about his research process behind winning in the RUX challenge - Retail Mobile App Design Concepts Challenge. Rio explained how he actively participated in the challenge forum to ask about the requirement details and understand the user journey, then started the UI research process by finding inspiration from Pinterest and Dribbble. He tried to apply the golden ratio proportions to the font and size of the content. Later, he combined the design style that he made to be in harmony with the branding guidelines given in the challenge.
This section may be one of the most crucial parts when participating in a design challenge at Topcoder. Many times experienced designers fail in the screening process because they forget to declare an asset or take assets incorrectly from a source that is not allowed in Topcoder. Declaration of asset design is often considered trivial but fatal if we carelessly do it. For example, if the designer does not make a clear declaration, it will be hard to find the source of images and icons from the design to be used by developers during development. More importantly, we want to avoid legal complaints from the creators of the third party elements because of copyright issues. In the bootcamp, we were taught to properly declare files that will be used in the submission for the challenge, following Topcoder standards and client needs.
Prototyping helps illustrate the way our design works in front of the clients. At the design bootcamp instructors guided us on how to create interactions such as displaying clickable pages, pop-up menus, filter functions, and so on. This was done by making a screen sequence and adding several guided elements in a consistent style.
The tool used to make this prototype is the Marvel App. Marvel App is a good tool for delivering design prototypes. We can share the prototyping results from the Marvel App to desktops, mobile devices, and even Apple Watch.
Topcoder is one of the best platforms because it allows anyone from different backgrounds and levels of skills to compete in their challenges. In the design bootcamp, we were guided to be able to jump into real-world problems by participating directly in a design challenge. In the submission process, and to make it fair for everyone, our instructors didn’t help us create our design. We used our own judgment and experience that we received in the onsite bootcamp to provide solutions in the challenge. However, after the challenge ended and winners were selected, the instructors checked all student’s work and provided feedback in their personal Marvel App about how they could improve their design based on the client winning design selection and from requirements in the challenge details page and forum interactions.
Before Bootcamp
I thought the UI / UX world was only for persons with good visual instinct and that someone that didn’t have artistic talent like me wouldn’t be able to join this world. This kind of opinion happened because I was only able to see finished designs from a UI perspective without seeing the entire process.
After Bootcamp
After bootcamp, my definition of UI / UX worlds changed 180 degrees. To become a good UI/UX designer, it takes a lot of practice. The Topcoder platform is one of its kind in that it’s able to facilitate anyone that wants to learn and master UI/UX knowledge.
Topcoder design bootcamp helped me a lot in the process of transforming myself into a UI/UX designer. I actually registered with Topcoder in 2015 but didn’t have the courage to compete because I was not confident with my skills and knowledge. Participating in the design bootcamp made me confident because we were asked to do a lot of practice designs using Topcoder design challenges as real-life study.
It didn’t take long before I started to experience winning in design challenges. Don’t get me wrong, cash prizes from Topcoder are very awesome, it’s a lot and is about three to five times the average salary in my country. But, the feeling of winning a design challenge and seeing my design built into productions that are able to solve client problems is priceless.
My suggestion for anyone that wants to improve their skills in UI/UX area but doesn’t know how to start is to attend the Topcoder design bootcamp. To get the design bootcamp held in your city, contact the Topcoder Community Team and ask them to run design bootcamp in your city. Reach out to our Design Evangelist fajar.mln and discuss how you can make the bootcamp happen in your area.
In addition, and as a closing statement, here are several challenges that I won after participating in the Topcoder Design Bootcamp:
1st Placement - 2020 Topcoder Open Logo Variation Design Challenge
1st Placement - IIN - API Storefront Portal Design Challenge
3rd Placement - Tsunami’s Material Supply Plant - Tableau DViz Design Concepts Challenge